<template>
  <div class="page">
    <el-form
      class="login-form"
      ref="form"
      label-width="100"
      :model="model"
      :rules="rules"
    >
      <el-form-item label="Username" prop="username">
        <el-input v-model="model.username" />
      </el-form-item>
      <el-form-item label="Password" prop="password">
        <el-input v-model="model.password" />
      </el-form-item>
      <el-form-item label="VerifyCode" class="captcha" prop="verifyCode">
        <el-input class="captcha__input" v-model="model.verifyCode" />
        <Captcha />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleLogin">Login</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import axios from "axios";
import Captcha from "./components/captcha.vue";

export default {
  name: "login",

  components: {
    Captcha,
  },

  data() {
    return {
      // 表单数据
      model: {
        // 用户名
        username: "",
        // 密码
        password: "",
        // 验证码
        verifyCode: "",
      },
      // 表单规则
      rules: {
        username: [{ required: true, message: "请输入" }],
        password: [
          { required: true, message: "请输入" },
          { min: 6, message: "最少6位" },
          // {
          //   type: "email",
          //   message: "请输入正确的邮箱号",
          // },
        ],
        verifyCode: [
          { required: true, message: "请输入" },
          // {
          //   pattern: /^1\d{10}$/,
          //   message: "请输入正确的手机号",
          // },
          // {
          //   validator: (rule, value) => {
          //     console.log("rule", rule);
          //     console.log("value", value);
          //     return value === "admin";
          //   },
          //   message: "请满足我的自定义校验的函数",
          // },
        ],
      },
    };
  },

  methods: {
    async handleLogin() {
      // 1. 获取到 表单组件 的实例对象, 并调用它的 validate 方法
      // this.$refs.form.validate((flag) => {
      //   // flag 用于表示成功还是失败
      //   console.log("flag", flag);
      //   if (flag) {
      //     // TODO..
      //   }
      // });
      // this.$refs.form
      //   .validate()
      //   .then(() => {
      //     console.log("通过");
      //   })
      //   .catch((error) => {
      //     console.log("不通过");
      //   });
      // try {
      //   await this.$refs.form.validate();
      //   console.log("通过");
      // } catch (error) {
      //   console.log("不通过");
      // }

      // axios.get("http://127.0.0.1:3000").then((response) => {
      //   console.log(response.data);
      // });

      axios
        .post("/api/admin/base/open/login", {
          username: "111",
          password: "222",
          captchaId: "333",
          verifyCode: "444",
        })
        .then((response) => {
          console.log(response.data);
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.page {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  background-color: #ccc;
}

.login-form {
  padding: 16px;
  box-sizing: border-box;
  width: 360px;
  border-radius: 5px;
  box-shadow: 0 0 10px pink;
  background-color: #fff;
}

.captcha {
  ::v-deep(.el-form-item__content) {
    justify-content: space-between;
  }

  &__input {
    width: 70px;
  }
}
</style>
